<template>
    <div class="box">
        <Title text="懋略可视化综合看板"></Title>
        <div class="mainbox">
            <div class="top">
                <div class="itemtac">
                    <div class="titlebox">
                        <div class="titleborder"></div>
                        <div>工单信息</div>
                    </div>
                    <div class="tickets">
                        <div v-for="item in ticketList" :key="item.id" class="ticket">
                            <div class="ticketname">工单:{{ item.name }}</div>
                            <div class="ticketnum">数量:{{ item.num }}kg</div>
                            <el-progress 
                            :text-inside="true" 
                            :stroke-width="20"
                            :percentage="item.numed/item.num*100" 
                            class="pro"
                            />
                        </div>
                    </div>
                </div>
                <div class="itemtacc">
                    <div class="titlebox">
                        <div class="titleborder"></div>
                        <div>能耗信息</div>
                    </div>
                    <div class="energy">
                        <div class="energytext">
                            <div class="energytextitem">年耗电能(kwh):  <span style="color: yellow;">{{ 123456 }}</span></div>
                            <div class="energytextitem">年耗水量(m<sup>3</sup>):  <span style="color: yellow;">{{ 8841 }}</span></div>
                            <div class="energytextitem">年耗燃气(m<sup>3</sup>):  <span style="color: yellow;">{{ 69861 }}</span></div>
                        </div>
                        <div class="gauges">
                            <div class="electricity">
                                <div class="electricityc" ref="electricitybox"></div>
                                <div class="electricityt">日耗电能(kwh)</div>
                            </div>
                            <div class="water">
                                <div class="waterc" ref="waterbox"></div>
                                <div class="watert">日耗水量(m<sup>3</sup>)</div>
                            </div>
                            <div class="gas">
                                <div class="gasc" ref="gasbox"></div>
                                <div class="gast">日耗燃气(m<sup>3</sup>)</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="itemtac">
                    <div class="titlebox">
                        <div class="titleborder"></div>
                        <div>年度能耗信息</div>
                    </div>
                    <div class="annualEnergy" ref="annualEnergybox"></div>
                </div>
            </div>
            <div class="center">
                <div class="itemtac">
                    <div class="titlebox">
                        <div class="titleborder"></div>
                        <div>产量信息</div>
                    </div>
                    <div class="yieldMessage">
                        <div class="yieldtitle">
                            <div style="height: 100%;width: 25%;text-align: center;">物料名称</div>
                            <div style="height: 100%;width: 25%;text-align: center;">物料编号</div>
                            <div style="height: 100%;width: 35%;text-align: center;">产量批次</div>
                            <div style="height: 100%;width: 15%;text-align: center;">数量</div>
                        </div>
                        <div class="yieldItembox">
                            <div class="yielditem" v-for=" item in yieldMessageList" :key="item.id">
                                <div style="height: 100%;width: 25%;text-align: center;">{{ item.name }}</div>
                                <div style="height: 100%;width: 25%;text-align: center;">{{ item.numbering }}</div>
                                <div style="height: 100%;width: 35%;text-align: center;">{{ item.batch }}</div>
                                <div style="height: 100%;width: 15%;text-align: center;">{{ item.num }}kg</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="itemtacc">
                    <div class="titlebox">
                        <div class="titleborder"></div>
                        <div>每日车间产能信息</div>
                    </div>
                    <div class="productivity" ref="productivitybox"></div>
                </div>
                <div class="itemtac">
                    <div class="titlebox">
                        <div class="titleborder"></div>
                        <div>入库信息</div>
                    </div>
                    <div class="storage">
                        <div class="storagebox">
                            <div style="width: 10%;text-align: center;">序号</div>
                            <div style="width: 40%;text-align: center;">入库批次</div>
                            <div style="width: 15%;text-align: center;">数量</div>
                            <div style="width: 35%;text-align: center;">入库时间</div>
                        </div>
                        <div class="storagebox" style="font-size: 0.75rem;" v-for="(item,index) in storageList" :key="item.id">
                            <div class="storagered" style="width: 10%;text-align: center;" v-if="index===0">{{ index+1 }}</div>
                            <div class="storageyellow" style="width: 10%;text-align: center;" v-else-if="index===1">{{ index+1 }}</div>
                            <div class="storageblue" style="width: 10%;text-align: center;" v-else-if="index===2">{{ index+1 }}</div>
                            <div class="storageIndex" style="width: 10%;text-align: center;" v-else>{{ index+1 }}</div>
                            <div style="width: 40%;text-align: center;">{{ item.batch }}</div>
                            <div style="width: 15%;text-align: center;">{{ item.num }}kg</div>
                            <div style="width: 35%;text-align: center;">{{ item.time }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div class="itemb">
                    <div class="titlebox">
                        <div class="titleborder"></div>
                        <div>来料合格率</div>
                    </div>
                    <div class="iqc" ref="iqcbox"></div>
                </div>
                <div class="itemb">
                    <div class="titlebox">
                        <div class="titleborder"></div>
                        <div>制程合格率</div>
                    </div>
                    <div class="process" ref="processbox"></div>
                </div>
                <div class="itemb">
                    <div class="titlebox">
                        <div class="titleborder"></div>
                        <div>成品台格率</div>
                    </div>
                    <div class="finishedProduct" ref="finishedProductbox"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import Title from '../components/Title.vue';
import { ref, onMounted ,markRaw,onUnmounted } from 'vue';
import { ticket,energy,annualEnergy,yieldMessage,storage,productivity,finishedProduct,process,iqc } from '../assets/mock';

const ticketList = ref([])
const energyList = ref({})
const annualEnergyList = ref([])
const yieldMessageList = ref([])
const storageList = ref([])
const productivityList = ref([])
const iqcList = ref([])
const processList = ref([])
const finishedProductList = ref([])

const electricitybox = ref(null)
const electricityEchart = ref('')
const electricityOption = ref({})
const waterbox = ref(null)
const waterEchart = ref('')
const waterOption = ref({})
const gasbox = ref(null)
const gasEchart = ref('')
const gasOption = ref({})
const annualEnergybox = ref(null)
const annualEnergyEchart = ref('')
const annualEnergyOption = ref({})
const productivitybox = ref(null)
const productivityEchart = ref('')
const productivityOption = ref({})
const iqcbox = ref(null)
const iqcEchart = ref('')
const iqcOption = ref([])
const processbox = ref(null)
const processEchart = ref('')
const processOption = ref([])
const finishedProductbox = ref(null)
const finishedProductEchart = ref('')
const finishedProductOption = ref([])
const timeout = ref('')
const intervaltime = ref('')

// createElectricityEchart(图表容器(Element ref)，图标实例(ref)，创建图表的option(ref)，当日最大用量(number)，当日用量(number)，单位(string))=>void
const creategaugeEchart = (echart,box,option,max,daily,unit)=>{
    echart.value = echarts.init(box.value)
    option.value = {
        color:{
            type:'line',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [{offset: 0, color: 'cyan'},{offset: 0.5,color:'yellow'},{offset: 1, color: 'red'}],
        },
        series: [
            {
                type: 'gauge',
                startAngle:200,
                endAngle: -20,
                progress: { // 展示当前进度。
                    show: true,
                    width: 5, // 进度条宽度
                },
                axisLine: { // 仪表盘轴线相关配置。
                    lineStyle: { // 仪表盘轴线样式。
                        width: 5,
                    }
                },
                axisTick: { // 刻度样式。
                    show: false,
                },
                splitLine: { // 分隔线样式。
                    length: 3, // 分隔线线长
                    lineStyle: { 
                    width: 2,
                    color: '#999'
                    }
                },
                axisLabel: {
                    show:false
                },
                pointer:{
                    show:true,
                    itemStyle:{
                        color:'white'
                    }
                },
                title: {
                    show: false
                },
                detail: { // 仪表盘详情，用于显示数据
                    valueAnimation: false,
                    fontSize: 16,
                    offsetCenter: [0, '70%'],
                    formatter: '{value} '+unit,
                    color:'white',

                },
                data: [
                    {
                    value: daily
                    }
                ],
                max,
                min:0
            }
        ]
    }
    echart.value.setOption(option.value)
}
const createAnnualEnergyEchart = ()=>{
    let arr = []
    annualEnergyList.value.data.forEach(item=>{
        arr = [...arr,...item]
    })
    let max = 0
    arr.forEach(item=>{
        if(item >max){
            max = item
        }
    })
    annualEnergyEchart.value = markRaw(echarts.init(annualEnergybox.value))
    annualEnergyOption.value = {
        textStyle:{
            color:'#FFFFFF'
        },
        color: ['#80FFA5', '#00DDFF'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: annualEnergyList.value.time,
            textStyle:{
                color:'#FFFFFF'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: annualEnergyList.value.month
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '(tec)/万',
                min:0,
                max,
                interval:max/5,
                axisLabel: {
                    formatter: '{value}'
                }
            }
        ],
        series: [
            {
                name: annualEnergyList.value.time[0],
                type: 'line',
                smooth: true,
                lineStyle: {
                    width: 0
                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgb(128, 255, 165)'
                    },
                    {
                        offset: 1,
                        color: 'rgb(1, 191, 236)'
                    }
                    ])
                },
                emphasis: {
                    focus: 'series'
                },
                data: annualEnergyList.value.data[0],
                tooltip: {
                    valueFormatter: function (value) {
                    return value + ' (tec)/万';
                    }
                },
                label:{
                    show:true,
                    color:'#FFFFFF'
                }
            },
            {
                name: annualEnergyList.value.time[1],
                type: 'line',
                smooth: true,
                lineStyle: {
                    width: 0
                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgb(0, 221, 255)'
                    },
                    {
                        offset: 1,
                        color: 'rgb(77, 119, 255)'
                    }
                    ])
                },
                emphasis: {
                    focus: 'series'
                },
                data: annualEnergyList.value.data[1],
                tooltip: {
                    valueFormatter: function (value) {
                    return value + ' (tec)/万';
                    }
                },
                label:{
                    show:true,
                    color:'#FFFFFF'
                }
            }
        ]
    }
    annualEnergyEchart.value.setOption(annualEnergyOption.value)
}
const createProductivityEchart = ()=>{
    let legendData = [] // 所有数据的数据名
    let seriesData = [] // 所有数据
    let max = 0 // 所有数据最大值
    let monthAndDay = [] // 横轴日期
    let date = new Date()
    productivityList.value.forEach(item=>{
        legendData.push(item.type) // 获取数据名

        let seriesObj = { // 需要传入的series
            name: item.type,
            type: 'line',
            data: item.data,
            tooltip: {
                valueFormatter: function (value) {
                return value + '';
                }
            }
        }
        seriesData.push(seriesObj)

        item.data.forEach(num=>{ // 获取最大值
            if(num>max){
                max = num
            }
        })
    })

    for(let i=0;i<15;i++){
        let day = new Date(date.getTime()-(86400000*i)).getDate()
        let month = new Date(date.getTime()-(86400000*i)).getMonth()+1
        if(day<10){
            day = '0'+day
        }
        if(month<10){
            month = '0'+month
        }
        monthAndDay.push(month+'-'+day)
    }
    monthAndDay.reverse()

    productivityEchart.value = markRaw(echarts.init(productivitybox.value))
    productivityOption.value = {
        textStyle:{
            color:'#FFFFFF'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        legend: {
            data: legendData,
            textStyle:{
                color:'#FFFFFF'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: monthAndDay
        },
        yAxis: [
            {
                type: 'value',
                name: '',
                min: 0,
                max,
                interval: Math.ceil(max/5),
                axisLabel: {
                    formatter: '{value}'
                }
            }
        ],
        series: seriesData
    }
    productivityEchart.value.setOption(productivityOption.value)
}
const createBarEchart = (echart,box,option,datalist)=>{
    let bardata = []
    let linedata = []
    let xline = []
    let max = 0
    datalist.forEach(item=>{
        bardata.push(item.num)
        linedata.push(item.rate)
        xline.push(item.time)
        if(item.num>max){
            max = item.num
        }
    })

    echart.value = markRaw(echarts.init(box.value))
    option.value = {
        textStyle:{
            color:'#FFFFFF'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        legend: {
            data: ['合格数量', '合格率'],
            textStyle:{
                color:'#FFFFFF'
            }
        },
        xAxis: {
            type: 'category',
            data: xline,
            axisPointer: {
                type: 'shadow'
            }
        },
        yAxis:[
            {
                name:'个数',
                type: 'value',
                min: 0,
                max,
                interval: Math.ceil(max/5),
                axisLabel: {
                    formatter: '{value}'
                }
            },
            {
                name:'合格率',
                min:0,
                max:100,
                interval: 20,
                type: 'value',
                axisLabel: {
                    formatter: '{value} %'
                }
            }
        ],
        series: [
            {
                name:'合格数量',
                data: bardata,
                type: 'bar',
                yAxisIndex:0,
                label:{
                    show:true,
                    color:'#FFFFFF'
                }
            },
            {
                name:'合格率',
                data:linedata,
                type:'line',
                yAxisIndex:1,
                label:{
                    show:true,
                    color:'#FFFFFF'
                }
            }
        ]
    }
    echart.value.setOption(option.value)
}

const getTicketList = ()=>{
    ticketList.value = [...ticket]
}
const getEnergyList = ()=>{
    energyList.value = {...energy}
}
const getAnnualEnergyList = ()=>{
    annualEnergyList.value = {...annualEnergy}
}
const getYieldMessageList = ()=>{
    yieldMessageList.value = [...yieldMessage]
}
const getStorageList = ()=>{
    storageList.value = [...storage]
}
const getProductivityList = ()=>{
    productivityList.value = [...productivity]
}
const getIqcList = ()=>{
    iqcList.value = [...iqc]
}
const getProcessList = ()=>{
    processList.value = [...process]
}
const getFinishedProductList = ()=>{
    finishedProductList.value = [...finishedProduct]
}
const updataList = ()=>{
    intervaltime.value = setInterval(()=>{
        electricitybox.value.removeAttribute('_echarts_instance_')
        waterbox.value.removeAttribute('_echarts_instance_')
        gasbox.value.removeAttribute('_echarts_instance_')
        annualEnergybox.value.removeAttribute('_echarts_instance_')
        productivitybox.value.removeAttribute('_echarts_instance_')
        iqcbox.value.removeAttribute('_echarts_instance_')
        finishedProductbox.value.removeAttribute('_echarts_instance_')
        processbox.value.removeAttribute('_echarts_instance_')
        getTicketList()
        getEnergyList()
        getAnnualEnergyList()
        getYieldMessageList()
        getStorageList()
        getProductivityList()
        getIqcList()
        getProcessList()
        getFinishedProductList()
        creategaugeEchart(electricityEchart,electricitybox,electricityOption,energyList.value.electricityCap,energyList.value.dailyElectricityConsumption,'kwh')
        creategaugeEchart(waterEchart,waterbox,waterOption,energyList.value.waterCap,energyList.value.dailyWaterConsumption,'m³')
        creategaugeEchart(gasEchart,gasbox,gasOption,energyList.value.gasCap,energyList.value.dailyGasConsumption,'m³')
        createAnnualEnergyEchart()
        createProductivityEchart()
        createBarEchart(iqcEchart,iqcbox,iqcOption,iqcList.value)
        createBarEchart(processEchart,processbox,processOption,processList.value)
        createBarEchart(finishedProductEchart,finishedProductbox,finishedProductOption,finishedProductList.value)
    },3600000)
    window.onresize = ()=>{
        clearTimeout(timeout.value)
        timeout.value = setTimeout(()=>{
            electricitybox.value.removeAttribute('_echarts_instance_')
            waterbox.value.removeAttribute('_echarts_instance_')
            gasbox.value.removeAttribute('_echarts_instance_')
            annualEnergybox.value.removeAttribute('_echarts_instance_')
            productivitybox.value.removeAttribute('_echarts_instance_')
            iqcbox.value.removeAttribute('_echarts_instance_')
            finishedProductbox.value.removeAttribute('_echarts_instance_')
            creategaugeEchart(electricityEchart,electricitybox,electricityOption,energyList.value.electricityCap,energyList.value.dailyElectricityConsumption,'kwh')
            creategaugeEchart(waterEchart,waterbox,waterOption,energyList.value.waterCap,energyList.value.dailyWaterConsumption,'m³')
            creategaugeEchart(gasEchart,gasbox,gasOption,energyList.value.gasCap,energyList.value.dailyGasConsumption,'m³')
            createAnnualEnergyEchart()
            createProductivityEchart()
            createBarEchart(iqcEchart,iqcbox,iqcOption,iqcList.value)
            createBarEchart(processEchart,processbox,processOption,processList.value)
            createBarEchart(finishedProductEchart,finishedProductbox,finishedProductOption,finishedProductList.value)
        },3000)
    }
}

onMounted(()=>{
    getTicketList()
    getEnergyList()
    getAnnualEnergyList()
    getYieldMessageList()
    getStorageList()
    getProductivityList()
    getIqcList() 
    getProcessList()
    getFinishedProductList()
    creategaugeEchart(electricityEchart,electricitybox,electricityOption,energyList.value.electricityCap,energyList.value.dailyElectricityConsumption,'kwh')
    creategaugeEchart(waterEchart,waterbox,waterOption,energyList.value.waterCap,energyList.value.dailyWaterConsumption,'m³')
    creategaugeEchart(gasEchart,gasbox,gasOption,energyList.value.gasCap,energyList.value.dailyGasConsumption,'m³')
    createAnnualEnergyEchart()
    createProductivityEchart()
    createBarEchart(iqcEchart,iqcbox,iqcOption,iqcList.value)
    createBarEchart(processEchart,processbox,processOption,processList.value)
    createBarEchart(finishedProductEchart,finishedProductbox,finishedProductOption,finishedProductList.value)
    updataList()
})
onUnmounted(()=>{
    window.onresize = null
    clearTimeout(timeout.value)
    clearInterval(intervaltime.value)
})
</script>

<style scoped>
.process{
    width: 100%;
    height: calc(100% - 40px);
}
.finishedProduct{
    width: 100%;
    height: calc(100% - 40px);
}
.iqc{
    width: 100%;
    height: calc(100% - 40px);
}
.bottom{
    width: 100%;;
    height: calc((100% - 20px)/3);
    margin: 10px 0;
    display: flex;
}
.storagered{
    border-radius: 5px;
    background-color: red;
}
.storageblue{
    border-radius: 5px;
    background-color: blue;
}
.storageyellow{
    border-radius: 5px;
    background-color: rgb(133, 145, 0);
}
.storageIndex{
    border-radius: 5px;
    background-color: rgb(185, 185, 185);
}
.storagebox{
    display: flex;
    height: 20px;
    width: 100%;
    margin: 5px 0;
    overflow: auto;
}
.storagebox::-webkit-scrollbar{
    width: 0;
}
.storage{
    width: 100%;
    height: calc(100% - 40px);
}
.productivity{
    width: 100%;
    height: calc(100% - 40px);
}
.yielditem{
    display: flex;
    height: 20px;
    margin: 5px 0;
    width: 100%;
}
.yieldItembox{
    width: 100%;
    height: calc(100% - 30px);
    font-size: 0.75rem;
    overflow: auto;
}
.yieldItembox::-webkit-scrollbar{
    width: 0;
}
.yieldtitle{
    display: flex;
    height: 20px;
    margin: 5px 0;
    width: 100%;
}
.yieldMessage{
    width: 100%;
    height: calc(100% - 40px);
}
.center{
    width: 100%;;
    height: calc((100% - 20px)/3);
    margin: 10px 0;
    display: flex;
}
.annualEnergy{
    width: 100%;
    height: calc(100% - 40px);
}
.gast{
    font-size: 16px;
    height: 20px;
    width: 100%;
    line-height: 20px;
    text-align: center;
    position: relative;
    bottom: 20px;
}
.gasc{
    width: 100%;
    height: calc(100% - 20px);
}
.gas{
    width: 30%;
    height: 100%;
}
.watert{
    font-size: 16px;
    height: 20px;
    width: 100%;
    line-height: 20px;
    text-align: center;
    position: relative;
    bottom: 10px;
}
.waterc{
    width: 100%;
    height: calc(100% - 20px);
}
.water{
    width: 40%;
    height: 100%;
}
.electricityt{
    font-size: 16px;
    height: 20px;
    width: 100%;
    line-height: 20px;
    text-align: center;
    position: relative;
    bottom: 20px;
}
.electricityc{
    width: 100%;
    height: calc(100% - 20px);
}
.electricity{
    width: 30%;
    height: 100%;
}
.gauges{
    width: 60%;
    height: 100%;
    display: flex;
}
.energytext{
    width: 40%;
    height: 100%;
    padding: 0 10px;
}
.energytextitem{
    font-size: 18px;
    font-weight: 500;
    width: 100%;
    height: calc(100%/3);
}
.energytextitem::before{
    content:'';
    width:0;
    height:100%;
    display:inline-block;
    vertical-align:middle;
}
.energy{
    height: calc(100% - 40px);
    width: 100%;
    display: flex;
}
.tickets{
    height: calc(100% - 40px);
    width: 100%;
    font-size: 13px;
    overflow: auto;
}
.ticket{
    display: flex;
    height: calc(100%/5);
    width: 100%;
    align-items: center;
}
.tickets::-webkit-scrollbar{
    width: 0;
}
.pro{
    width: 30%
}
:deep(.el-progress-bar__outer){
    background-color: rgba(240, 248, 255, 0);
    border: 1px solid #00C1DE;
    border-radius: 10px;
}
.ticketname{
    width: 40%;
    text-align: center;
}
.ticketnum{
    width: 30%;
    text-align: center;
    margin: 0 5px;
}
.top{
    width: 100%;;
    height: calc((100% - 20px)/3);
    margin: 10px 0;
    display: flex;
}
.itemb{
    width: calc((100% - 60px)/3);
    background-color: rgba(255, 255, 255, 0.1);
    height: 100%;
    margin: 0 10px;
}
.itemtacc{
    width: calc((100% - 60px)/2);
    height: 100%;
    margin: 0 10px;
    background-color: rgba(255, 255, 255, 0.1);
}
.itemtac{
    width: calc((100% - 60px)/4);
    height: 100%;
    margin: 0 10px;
    background-color: rgba(255, 255, 255, 0.1);
}
.titleborder{
    width: 5px;
    height: 20px;
    margin: 5px;
    background-color: rgb(73, 188, 247);
    border-radius: 3px;
}
.titlebox{
    display: flex;
    height: 30px;
    width: 100%;
    font-size: 16px;
    line-height: 30px;
    padding-left: 10px;
    margin-bottom: 10px;
}
.mainbox{
    height: calc(100% - 60px);
    margin-top: 10px;
    width: 100%;
}
.box{
    height: 100%;
    width: 100%;
    color: white;
    min-width: 1080px;
    min-height: 720px;
}
</style>